import React, { PureComponent } from "react";

// import connect from "../utils/connect"
import { connect } from "react-redux";

import { 
  addAction,
  changeBannerAction,
  changeRecommendAction
} from "../store/actionCreators";

//0. 异步数据放入redux中
import axios from "axios";

class Home extends PureComponent {  
  
  componentDidMount() {
    //1.请求数据
    axios({
      url: "http://123.207.32.32:8000/home/multidata"
    }).then(res => {
      const { data } = res.data;
      console.log(data);
      //2. 调用定义派发action 传入数据
      this.props.getBanners(data.banner.list)
      this.props.getRecommend(data.recommend.list)
    })
  }

  render() {
    return (
      <div>
        <h1>Home3</h1>
        <h2>当前计数：{this.props.counter}</h2>
        <button onClick={e => this.props.increment()}>+1</button>
        <button onClick={e => this.props.addNumber(5)}>+5</button>
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    counter: state.counter
  }
}

const mapDispatchToProps = dispatch => {
  return {
    increment() {
      dispatch(addAction(1))
    },
    addNumber(num) {
      dispatch(addAction(num))
    },
    getBanners(banner) {
      dispatch(changeBannerAction(banner))
    },
    getRecommend(recommend) {
      dispatch(changeRecommendAction(recommend))
    }
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Home)